<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'userinfo.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" href="../css/jquery.pagination.css" />
	<script src="../js/jquery-1.10.2.min.js"></script>
	<script src="../js/jquery.pagination.min.js"></script>
	<style type="text/css">
	#customers
	  {
	  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	  width:100%;
	  border-collapse:collapse;
	  }
	
	#customers td, #customers th 
	  {
	  font-size:1em;
	  border:1px solid #98bf21;
	  padding:3px 7px 2px 7px;
	  }
	
	#customers th 
	  {
	  font-size:1.1em;
	  text-align:left;
	  padding-top:5px;
	  padding-bottom:4px;
	  background-color:#424F63;
	  color:#ffffff;
	  }
	
	#customers tr.alt td 
	  {
	  color:#000000;
	  background-color:#B0C4DE;
	  }
	  
	  * {
				margin: 0;
				padding: 0;
			}
			
			body {
				font-family: "微软雅黑";
				background: #eee;
			}
			
			button {
				display: inline-block;
				padding: 6px 12px;
				font-weight: 400;
				line-height: 1.42857143;
				text-align: center;
				vertical-align: middle;
				cursor: pointer;
				border: 1px solid transparent;
				border-radius: 4px;
				border-color: #28a4c9;
				color: #fff;
				background-color: #5bc0de;
				margin: 20px 20px 0 0;
			}
			
			.box {
				width: 800px;
				margin: 100px auto 0;
				height: 34px;
			}
			
			.page {
				width: 600px;
			}
			
			.info {
				width: 200px;
				height: 34px;
				line-height: 34px;
			}
			
			.fl {
				float: left;
			}
	</style>
	<script>
			$(function() {
				$("#pagination1").pagination({
					currentPage: 1,
					totalPage: 12,
					callback: function(current) {
						$("#current1").text(current)
					}
				});

				$("#pagination2").pagination({
					currentPage: 3,
					totalPage: 12,
					isShow: false,
					count: 6,
					prevPageText: "< 上一页",
					nextPageText: "下一页 >",
					callback: function(current) {
						$("#current2").text(current)
					}
				});

				$("#pagination3").pagination({
					currentPage: 4,
					totalPage: 16,
					isShow: true,
					count: 7,
					homePageText: "首页",
					endPageText: "尾页",
					prevPageText: "上一页",
					nextPageText: "下一页",
					callback: function(current) {
						$("#current3").text(current)
					}
				});

				$("#getPage").on("click", function() {
					var info = $("#pagination3").pagination("getPage");
					alert("当前页数：" + info.current + ",总页数：" + info.total);
				});

				$("#setPage").on("click", function() {
					$("#pagination3").pagination("setPage", 1, 10);
				});
			});
		</script>
  </head>
  
  <body>
  
  	
		
    <h1 align="center">所有用户详细信息</h1>

		<table id="customers">
		<tr>
		<th>用户ID</th>
		<th>用户名</th>
		<th>银行卡ID</th>
		<th>手机号码</th>
		<th>身份证号</th>
		<th>住址</th>
		<th>邮箱</th>
		<th>注册时间</th>
		<th>账号状态</th>
		</tr>
		
		<tr>
		<td>Apple</td>
		<td>Steven Jobs</td>
		<td>USA</td>
		<td>Apple</td>
		<td>Steven Jobs</td>
		<td>USA</td>
		<td>Apple</td>
		<td>Steven Jobs</td>
		<td>USA</td>
		</tr>
		
		<tr class="alt">
		<td>Baidu</td>
		<td>Li YanHong</td>
		<td>China</td>
		<td>Baidu</td>
		<td>Li YanHong</td>
		<td>China</td>
		<td>Baidu</td>
		<td>Li YanHong</td>
		<td>China</td>
		</tr>
		
		<tr>
		<td>Google</td>
		<td>Larry Page</td>
		<td>USA</td>
		<td>Google</td>
		<td>Larry Page</td>
		<td>USA</td>
		<td>Google</td>
		<td>Larry Page</td>
		<td>USA</td>
		</tr>
		
		<tr class="alt">
		<td>Lenovo</td>
		<td>Liu Chuanzhi</td>
		<td>China</td>
		<td>Lenovo</td>
		<td>Liu Chuanzhi</td>
		<td>China</td>
		<td>Lenovo</td>
		<td>Liu Chuanzhi</td>
		<td>China</td>
		</tr>
		
		<tr>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>USA</td>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>USA</td>
		<td>Microsoft</td>
		<td>Bill Gates</td>
		<td>USA</td>
		</tr>
		
		<tr class="alt">
		<td>Nokia</td>
		<td>Stephen Elop</td>
		<td>Finland</td>
		<td>Nokia</td>
		<td>Stephen Elop</td>
		<td>Finland</td>
		<td>Nokia</td>
		<td>Stephen Elop</td>
		<td>Finland</td>
		</tr>
		
		
		</table>
		
     
  </body>
</html>
